<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>CSS网页布局</title>
	<link rel="stylesheet" href="css/index.css">
	
</head>
<body>
<!-- 头部 -->
	<div class="header">
		<div class="logo">
            <img src="image/logo.png" alt="logo.png">
        </div>
		<div class="nav">
			<ul>
				<li>手记</li>
				<li>视频</li>
				<li>图片</li>
				<li>首页</li>
			</ul>
		</div>
	</div>
	<!-- 主体 -->
    <div class="main">
        <div class="top">
            <img src="image/1.jpeg" alt="">
        </div>
        <!-- 遮罩层 -->
        <div class="topLayer">

        </div>
        <!-- 最上层的内容 -->
        <div class="topLayer-top">
            <div class="word">MY BEAUTIFUL LIFE</div>
            <button>LOOK MORE &gt;</button>
        </div>

        <div class="middle">
            <div class="m-top">
                <div class="commen weibo">
                    <img src="image/weibo.png">
                    <div class="comm">MICROBLOG</div>
                </div>
                <div class="commen weixin">
                    <img src="image/weixin.png">
                    <div class="comm">WECHAT</div>
                </div>
                <div class="commen qq">
                    <img src="image/QQ.png">
                    <div class="comm">QQ</div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="m-middle">
                "I want to give good things to record down,<br>after the recall will be very beautiful."
            </div>
            <div class="m-bottom">
                <div class="m-com">
                    <img src="image/03-01.jpg">
                    <div class="des1">Cool Image</div>
                    <div class="des2">Record The Picture</div>
                </div>
                <div class="m-com">
                    <img src="image/03-02.jpg">
                    <div class="des1">Great Picture</div>
                    <div class="des2">Record The Picture</div>
                </div>
                <div class="m-com">
                    <img src="image/03-03.jpg">
                    <div class="des1">Cool Image</div>
                    <div class="des2">Record The Picture</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="bottom">
          <div class="content">
            <div class="titile">FROM THE PHOTO ALBUM</div>
            <div class="pic-content">
                <dl>
                    <dt><img src="image/04-01.jpg"></dt>
                    <dd class="word">
                        Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.
                    </dd>
                </dl>
                <dl>
                    <dt><img src="image/04-02.jpg"></dt>
                    <dd class="word">
                        Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.
                    </dd>
                </dl>
            </div>
              <div class="clear">
              </div>
          </div>
        </div>
    </div>
	<!-- 底部 -->
<div class="footer">
    © 2016 imooc.com  京ICP备13046642号
</div>
</body>
</html>